<template>
  <el-dialog
    v-model="dialogVisible"
    title="选择发票"
    width="1200"
    overflow
    @close="handleClose"
  >
    <el-form :model="searchForm" label-width="auto" :inline="true">
      <el-row>
        <el-col :span="12">
          <el-form-item label="开票时间">
            <el-date-picker
              v-model="searchForm.date"
              type="daterange"
              range-separator="-"
              start-placeholder="开始"
              end-placeholder="结束"
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6" style="text-align: left">
          <el-button
            color="#1E3485"
            @click="
              tablePage.currentPage = 1;
              getlist();
            "
            >搜索</el-button
          >
          <el-button type="default" @click="clearAllFields">清空</el-button>
        </el-col>
      </el-row>
    </el-form>
    <vxe-table
      border
      min-height="300"
      header-align="center"
      :column-config="{ resizable: true }"
      :row-config="{ isHover: true }"
      :data="TableData"
      size="small"
      @checkbox-all="selectAllChangeEvent"
      @checkbox-change="selectChangeEvent"
    >
      <vxe-column type="checkbox" width="40" />
      <vxe-column field="" title="开票时间" width="150" />
      <vxe-column field="" title="开票金额" width="150" />
      <vxe-column field="" title="项目名称" width="260" />
      <vxe-column field="" title="开票单位" width="260" />
      <vxe-column field="" title="发票代码" width="150" />
      <vxe-column field="" title="发票号码" />
    </vxe-table>
    <vxe-pager
      v-model:current-page="tablePage.currentPage"
      v-model:page-size="tablePage.pageSize"
      :layouts="[
        'Sizes',
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'FullJump',
        'Total'
      ]"
      :total="tablePage.total"
      size="small"
      @page-change="handlePageChange"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" color="#1E3485" @click="go()">
          确认
        </el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watch, onMounted } from "vue";
import { VxeTablePropTypes } from "vxe-table";
import { VxeTableInstance, VxePagerEvents, VxeTableEvents } from "vxe-table";

import { getinvoicepage } from "@/api/ERP_PaymentMange";

const emit = defineEmits(["close", "confirm"]);
// 弹窗关闭/打开事件
const props = defineProps({
  visible: Boolean,
  contractId: String
});
function handleClose() {
  emit("close", false);
}
const dialogVisible = ref(false);
const formLabelWidth = "140px";

watch(
  () => props.visible,
  val => {
    dialogVisible.value = val;
    if (props.contractId != "") {
      getlist();
    }
  },
  { immediate: true }
);
//表格
const TableData = ref([]);

const searchForm = ref({
  date: []
});
// 表格分页配置
const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
});

//获取发票列表
const getlist = (query?: string) => {
  let params: any = {};
  params.pageIndex = tablePage.currentPage;
  params.pageSize = tablePage.pageSize;
  params.contractId = props.contractId;
  getinvoicepage(params).then((response: any) => {
    TableData.value = response.data.records;
    tablePage.total = response.data.totalElements;
  });
};

// 表格分页事件
const handlePageChange: VxePagerEvents.PageChange = ({
  currentPage,
  pageSize
}) => {
  tablePage.currentPage = currentPage;
  tablePage.pageSize = pageSize;
  getlist();
};
const tableRef = ref();
const selectRow = ref();
const selectAllChangeEvent: VxeTableEvents.CheckboxAll = ({ checked }) => {
  const $table = tableRef.value;
  if ($table) {
    selectRow.value = $table.getCheckboxRecords();
  }
};
const selectChangeEvent: VxeTableEvents.CheckboxChange = ({ checked }) => {
  const $table = tableRef.value;
  if ($table) {
    selectRow.value = $table.getCheckboxRecords();
  }
};
function go() {
  emit("close", selectRow);
  dialogVisible.value = false;
}
// 清空按钮点击事件
const clearAllFields = () => {
  // 重置SearchForm对象的所有属性
  for (const key in searchForm) {
    if (searchForm.value.hasOwnProperty(key)) {
      if (key === "signDate") {
        // searchForm[key] = [];
        searchForm[key] = null;
      } else {
        searchForm[key] = "";
      }
    }
  }
};
</script>
